<template>
  <avue-crud 
    :data="tableData"
    :option="tableColumns"
    ref="multipleTable"
    :page="page"
    @refresh-change="refresh"  
    @search-change="searchChange" 
    @search-reset="searchReset"
    @filter-change="filterChange"
    @size-change="sizeChange"
    @current-change="currentChange">
    <template slot="search">
      <search-col
        v-for="item in searchList"
        :key="item.prop"
        :item="item"
        :value="searchForm[item.prop]"
        @input="inputSearchForm($event, item.prop)"
      ></search-col>
    </template>
    <template slot="menuLeft">
      <el-button type="primary" @click="set(3)" size="small">批量已读</el-button>
      <el-button type="danger" @click="set(4)" size="small">批量删除</el-button>
    </template>
    <template slot="menu" slot-scope="{row}">
      <el-button    
        v-if="row.isread === 0"
        size="small"
        type="text"
        class="primarybtn-color"
        @click.native="set(1, row)">
        已读
      </el-button>      
      <el-button 
        v-if="row.isread !== 2"
        size="small"
        type="text"
        class="dangerbtn-color"
        @click.native="set(2, row)">
        删除
      </el-button> 
    </template>
    <template slot="isread" slot-scope="scope" >
      <div v-if="scope.row.isread === 1" style="color:#13ce66">已读</div>
      <div v-else-if="scope.row.isread === 0" style="color:#ff4949">未读</div>
      <div v-else style="color:#4285F4">已删除</div>
    </template>
  </avue-crud>
</template>

<script>
import { msgs_api } from "@/api/common"
import SearchCol from '@/components/view/search_col'
import { setStore } from '@/util/store'

export default {
  name: "msgs",
  components:{ SearchCol },
  data() {
    return {
      page: {
        // pageSizes: [5, 10, 20, 30, 40],
        currentPage: 1,
        total: 0,
        pageSize: 10
      }, // 分页信息
      searchForm: {}, // 搜索框记录
      searchList: [{
        prop: 'isread',
        label: '状态',
        type: 'select',
        multiple: false,
        dicData: [
          {
            label: '未读',
            value: 0
          },{
            label: '已读',
            value: 1
          },{
            label: '已删除',
            value: 2
          }
        ]
      }, {
        prop: 'keyword',
        label: '快捷搜索',
        placeholder: '消息内容'
      }],
      filterForm: {}, // 过滤框记录
      tableData: [],
      tableColumns: {
        menu: true,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        expand: false,
        headerAlign: "center",
        border: true,
        stripe: false,
        showHeader: true,
        index: false,
        size: 'mini',
        page: true,
        menuWidth: 100,
        column: [
          {
            label: "类型",
            prop: "isread",
            width: 80,
            align: "center",
            slot:true
          },
          {
            label: "内容",
            prop: "content",
            overHidden: true
          },
          {
            label: "时间",
            align: "center",
            prop: "created_at",
            width: 200
          }
        ]
      }
    };
  },
  created() {
    this.getTableList();
  },
  mounted() {},
  computed: {},
  props: [],
  methods: {
    // 搜索框输入
    inputSearchForm(val, prop) {
      this.$set(this.searchForm, prop, val)
      // this.$emit('input', { ...this.searchForm, [prop]: val })
    },
    // 表格刷新
    refresh() {
      this.getTableList();
    },
    // 搜索
    searchChange(params) {
      this.page.currentPage = 1
      this.getTableList(params)
      Object.assign(this.searchForm, params)     
    },
    // 搜索清空
    searchReset() {
      this.page.currentPage = 1
      for(let k of Object.keys(this.searchForm)){
          // eslint-disable-next-line
          Vue.delete(this.searchForm,k)
      }
      this.getTableList(this.searchForm)
    },
    // 表格过滤（高级搜索）
    filterChange(result) {
      console.log(result)
      this.getTableList(result)
      this.filterForm = result
    },
    // 分页
    sizeChange(val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.getTableList(); 
    },
    // 当前页
    currentChange(val) {
      this.page.currentPage = val
      this.getTableList(); 
    },
    // 获取表格数据
    getTableList(where) {
      let _this = this,
          params = {
            page: this.page.currentPage,
            limit: this.page.pageSize
          }
      params = Object.assign({}, params, this.searchForm)
      params = Object.assign({}, params, this.filterForm)
      if(where){
        params = Object.assign({}, params, where)
      }
      _this.axios.post(msgs_api.get_list, params).then((res) => {
        console.log(res)
        if(res.data.code == 10000){
          _this.tableData = res.data.data.data
          _this.page.total = res.data.data.count
        }else{
          _this.tableData = []
          _this.page.total = 0
          _this.$message({
            showClose: false,
            message: res.data.message,
            type: 'error'
          });
        }
      }).catch((err)=>{
        _this.tableData = []
        _this.page.total = 0
        console.log('调用失败',err)
      })
    },
    get_msg_total() {
      let _this = this
      _this.axios.post(msgs_api.get_msg_total).then((res) => {
        console.log(res)
        if(res.data.code == 10000){
          _this.$store.commit("SET_OBJ", { key: 'msgsLen', obj: res.data.data.total })
          _this.$set(_this.$store.state, 'msgsLen', res.data.data.total)
          setStore({ name: 'msgsLen', content: res.data.data.total, type: 'session' })
        }else{
          _this.$store.commit("SET_OBJ", { key: 'msgsLen', obj: 0 })
          _this.$set(_this.$store.state, 'msgsLen', 0)
          setStore({ name: 'msgsLen', content: 0, type: 'session' })
          _this.$message({
            showClose: false,
            message: res.data.message,
            type: 'error'
          });
        }
      }).catch((err)=>{
        _this.$store.commit("SET_OBJ", { key: 'msgsLen', obj: 0 })
        _this.$set(_this.$store.state, 'msgsLen', 0)
        setStore({ name: 'msgsLen', content: 0, type: 'session' })
        console.log('调用失败',err)
      })
    },
    set(type, row) {
      let _this = this,
          params = {
            type: type
          }
      if (type === 1 || type === 2) {
        params['id'] = row.id
      }
      _this.handleAxiosFun(msgs_api.set_msg_status, params)
    },
    // axios接口请求
    handleAxiosFun (url, params, _sucess_callback, _fail_callback) {
      let _this = this

      _this.axios.post(url, params).then ((res) => {
        if (res.data.code == 10000) {
          _this.$message ({
            showClose: false,
            message: res.data.message,
            type: 'success'
          });
          if (_sucess_callback && typeof _sucess_callback === 'function') {
            _sucess_callback()
          } else {
            _this.getTableList() 
            _this.get_msg_total()
          }
        } else {
          _this.$message ({
            showClose: false,
            message: res.data.message,
            type: 'error'
          });
          if (_fail_callback && typeof _fail_callback === 'function') {
            _fail_callback()
          } 
        }
      }) .catch (() => {
        _this.$message ({
          showClose: false,
          message: '调用失败',
          type: 'error'
        });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.code {
  font-size: 12px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}
</style>
